<template>
  <view class="zk_view_steps">
    <view v-for="(item, i) in stepList" :key="i" class="zk_view_item">
       <view class="zk_view_inner">
         <view v-if="currentPage === i" class="zk_view_icon">
           <tm-icon fontSize="32" name="iconfont icon-a-wanchenglv" :color="activeColor"></tm-icon>
         </view>
         <view v-else class="zk_view_dot" :style="{background: item.dotColor}"></view>

         <view v-if="i !== stepList.length -1" class="zk_view_line" :style="{borderColor: item.lineColor ? item.lineColor: '#D8D8D8'}"></view>
         <view class="zk_view_title">
           {{item.title}}
         </view>
         <view class="zk_view_des">
           {{item.datetime}}
         </view>
       </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, watch, reactive } from 'vue'


const props = defineProps({
  steps: Array,
  curPage: String || Number,
  activeColor: String
})

console.log('jp======props',props)
const stepList = ref<any[]>(props.steps)
const currentPage = ref<any>(0)
const activeColor = ref<string>(props.activeColor)
watch(
    () => props.steps,
    (newVal) => {
      stepList.value = newVal
    }
)
watch(
    () => props.curPage,
    (newVal) => {
      currentPage.value = newVal
    }
)
watch(
    () => props.activeColor,
    (newVal) => {
      activeColor.value = newVal
    }
)

</script>

<style lang="scss" scoped>
.zk_view_steps{
  padding: 20px;
  background: #fff;

  .zk_view_title{
    font-size: $cus-font-size-16;
    padding-bottom: 10px;
  }
  .zk_view_dot{
    width: 10px;
    height: 10px;
    background: #D8D8D8;
    border-radius: 100%;
    position: absolute;
    top: 18px;
    left: 0;
    z-index: 30;
  }
  .zk_view_icon{
    position: absolute;
    top: 18px;
    left: -3px;
    z-index: 30;
  }
  .zk_view_line{
    border-left: 1px solid #D8D8D8;
    position: absolute;
    height: 100%;
    top: 18px;
    left: 5px;
    z-index: 20;

  }
  .zk_view_item{
    position: relative;
    padding: 14px 0 0;
    .zk_view_inner{
      margin-left: 30px;
      padding-bottom: 20px;
      border-bottom: 1px solid #D8D8D8;
    }
  }
  .zk_view_des{
    font-size: $cus-font-size-14;
    color: $cus-color-1;
  }
}
</style>